<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
    姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1（单向）:<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
<!--    姓名2（单向）:<input type="text" placeholder="Full Name2" v-model="fullName2"><br>-->
    姓名3（双向）:<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el:'#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            // fullName1:'A B'
        },
        // 计算属性
        computed: {
            fullName1 () {
                console.log('fullName1 ()')
                return this.firstName + this.lastName;
            },
            //监视属性值的变化
            fullName3: {
                get(){
                   return this.firstName +' '+this.lastName;
                },
                set(value){
                    var spilt = value.split(" ");
                    this.firstName = spilt[0];
                    this.lastName = spilt[1];
                }
            }
        },
        //监视
        watch: {
            firstName: function (value){
                console.log('firstName发生改变')
            }
        }
    });
    vm.$watch('lastName',function (value,value1){
        console.log('lastName发生改变,新值为：' + value + '旧的值为：' + value1);
    })
</script>
</body>
</html>